import { useState, useMemo } from 'react';
import { useAppointmentStore } from '@/hooks/useAppointmentStore';
import { clinicInfo } from '@/mocks/clinicInfo';
import { toRepublicEraDate } from '@/utils/dateUtils';

const periodLabels: Record<string, string> = {
  morning: '上午診',
  noon: '下午診',
  evening: '晚診',
};

export default function PrintReportView() {
  const { doctors, getAppointmentsForDate, getDayActivePeriods, getAvailableSlots } = useAppointmentStore();
  const [selectedDate, setSelectedDate] = useState(() => new Date().toISOString().split('T')[0]);

  const formattedDate = useMemo(() => {
    const d = new Date(selectedDate);
    const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
    return `${d.getFullYear()} 年 ${d.getMonth() + 1} 月 ${d.getDate()} 日（${dayNames[d.getDay()]}）`;
  }, [selectedDate]);

  const allAppointments = useMemo(() => getAppointmentsForDate(selectedDate), [selectedDate, getAppointmentsForDate]);

  const doctorReports = useMemo(() => {
    return doctors.map((doctor) => {
      const appts = allAppointments.filter((a) => a.doctorId === doctor.id);
      const periods = getDayActivePeriods(doctor.id, selectedDate);
      const slotGroups = getAvailableSlots(doctor.id, selectedDate);
      const totalSlots = slotGroups.reduce((sum, g) => sum + g.slots.length, 0);
      const bookedSlots = slotGroups.reduce((sum, g) => sum + g.slots.filter((s) => s.booked).length, 0);
      const isWorking = periods.length > 0;
      return { doctor, appts, periods, totalSlots, bookedSlots, isWorking };
    });
  }, [selectedDate, allAppointments, getDayActivePeriods, getAvailableSlots]);

  const workingDoctors = doctorReports.filter((r) => r.isWorking);
  const totalBooked = workingDoctors.reduce((sum, r) => sum + r.bookedSlots, 0);
  const totalSlotsAll = workingDoctors.reduce((sum, r) => sum + r.totalSlots, 0);

  const handlePrint = () => {
    window.print();
  };

  const PrintOnlyHeader = () => (
    <div className="hidden print:block mb-8 border-b-2 border-gray-800 pb-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-2">{clinicInfo.name}</h1>
      <p className="text-sm text-gray-600">{clinicInfo.address}</p>
      <p className="text-sm text-gray-600">電話：{clinicInfo.phone}</p>
      <h2 className="text-xl font-bold text-gray-900 mt-6 mb-1">每日預約報表</h2>
      <p className="text-base text-gray-700">{formattedDate}</p>
    </div>
  );

  return (
    <div className="space-y-6">
      {/* Controls - hidden when printing */}
      <div className="print:hidden bg-background-50 rounded-xl border border-background-200/70 p-5">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 flex items-center justify-center rounded-xl bg-primary-500">
              <i className="ri-printer-line text-white text-lg"></i>
            </div>
            <div>
              <h2 className="font-semibold text-foreground-950 text-base">每日報表</h2>
              <p className="text-sm text-foreground-400 mt-0.5">選擇日期後點擊列印即可輸出報表</p>
            </div>
          </div>
          <div className="flex items-center gap-3 ml-auto">
            <input
              type="date"
              value={selectedDate}
              onChange={(e) => setSelectedDate(e.target.value)}
              className="px-3 py-2.5 rounded-lg border border-background-200/70 bg-background-50 text-foreground-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-transparent cursor-pointer"
            />
            <button
              onClick={handlePrint}
              className="px-5 py-2.5 rounded-lg bg-primary-500 text-white text-sm font-medium whitespace-nowrap hover:bg-primary-600 transition-all cursor-pointer flex items-center gap-1.5"
            >
              <i className="ri-printer-line"></i>
              列印報表
            </button>
          </div>
        </div>
      </div>

      {/* Report Content */}
      <div className="bg-background-50 rounded-xl border border-background-200/70 overflow-hidden print:border-none print:rounded-none print:shadow-none">
        <PrintOnlyHeader />

        <div className="p-5 md:p-6 print:p-0">
          <div className="print:hidden flex flex-col sm:flex-row items-start sm:items-center justify-between mb-5 pb-5 border-b border-background-200/70">
            <div>
              <h3 className="font-semibold text-foreground-950 text-lg">{clinicInfo.name}</h3>
              <p className="text-sm text-foreground-400 mt-0.5">{formattedDate} 預約報表</p>
            </div>
            <div className="flex items-center gap-5 mt-2 sm:mt-0">
              <span className="text-sm text-foreground-500">
                總預約 <span className="font-bold text-foreground-900">{allAppointments.length}</span> 筆
              </span>
              <span className="text-sm text-foreground-500">
                總時段 <span className="font-bold text-foreground-900">{totalBooked}/{totalSlotsAll}</span>
              </span>
            </div>
          </div>

          <div className="hidden print:flex items-center justify-between mb-5 pb-3 border-b border-gray-300">
            <span className="text-sm text-gray-700">
              總預約 <strong>{allAppointments.length}</strong> 筆，總時段 <strong>{totalBooked}/{totalSlotsAll}</strong>
            </span>
            <span className="text-xs text-gray-500">
              列印時間：{new Date().toLocaleString('zh-TW')}
            </span>
          </div>

          {workingDoctors.length === 0 ? (
            <div className="text-center py-16">
              <div className="w-14 h-14 mx-auto mb-4 flex items-center justify-center rounded-xl bg-background-100 print:bg-gray-100">
                <i className="ri-calendar-2-line text-3xl text-foreground-300 print:text-gray-400"></i>
              </div>
              <p className="text-base text-foreground-400 print:text-gray-500">當日無看診醫師或尚無預約</p>
            </div>
          ) : (
            <div className="space-y-5 print:space-y-4">
              {workingDoctors.map(({ doctor, appts, periods, totalSlots, bookedSlots }) => (
                <div
                  key={doctor.id}
                  className="border border-background-200/70 rounded-lg overflow-hidden print:border print:border-gray-300 print:rounded-none print:break-inside-avoid"
                >
                  <div className="px-4 py-3 bg-background-100/70 print:bg-gray-100 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-9 h-9 rounded-full overflow-hidden flex-shrink-0 print:w-10 print:h-10">
                        <img
                          src={doctor.photo}
                          alt={doctor.name}
                          className="w-full h-full object-cover object-top"
                        />
                      </div>
                      <div>
                        <span className="font-semibold text-foreground-900 text-sm print:text-base">{doctor.name}</span>
                        <span className="text-xs text-foreground-400 ml-2 print:text-sm">
                          {periods.map((p) => periodLabels[p.key] || p.key).join(' / ')}
                        </span>
                      </div>
                    </div>
                    <span className="text-xs text-foreground-500 print:text-sm">
                      已約 {bookedSlots}/{totalSlots} 位
                    </span>
                  </div>

                  <div className="overflow-x-auto">
                    <table className="w-full text-left">
                      <thead>
                        <tr className="border-b border-background-200/70 print:border-b print:border-gray-300">
                          <th className="px-4 py-3 text-xs font-semibold text-foreground-400 uppercase tracking-wider print:text-sm w-16">
                            時段
                          </th>
                          <th className="px-4 py-3 text-xs font-semibold text-foreground-400 uppercase tracking-wider print:text-sm">
                            姓名
                          </th>
                          <th className="px-4 py-3 text-xs font-semibold text-foreground-400 uppercase tracking-wider print:text-sm">
                            電話
                          </th>
                          <th className="px-4 py-3 text-xs font-semibold text-foreground-400 uppercase tracking-wider print:text-sm">
                            出生日期
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {appts.length === 0 ? (
                          <tr>
                            <td colSpan={4} className="px-4 py-4 text-center text-sm text-foreground-400 print:text-sm">
                              尚無預約
                            </td>
                          </tr>
                        ) : (
                          appts.map((appt, idx) => (
                            <tr
                              key={appt.id}
                              className={`border-b border-background-100/70 print:border-b print:border-gray-200 ${
                                idx % 2 === 0 ? 'bg-background-50' : 'bg-background-100/30'
                              } print:bg-white`}
                            >
                              <td className="px-4 py-3 text-sm font-medium text-foreground-900 whitespace-nowrap print:text-sm">
                                {appt.time}
                              </td>
                              <td className="px-4 py-3 text-sm font-medium text-foreground-900 whitespace-nowrap print:text-sm">
                                {appt.patientName}
                              </td>
                              <td className="px-4 py-3 text-sm text-foreground-600 whitespace-nowrap print:text-sm">
                                {appt.patientPhone}
                              </td>
                              <td className="px-4 py-3 text-sm text-foreground-600 whitespace-nowrap print:text-sm">
                                {toRepublicEraDate(appt.patientBirthDate)}
                              </td>
                            </tr>
                          ))
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
              ))}
            </div>
          )}

          <div className="hidden print:block mt-6 pt-3 border-t border-gray-300 text-xs text-gray-500">
            <p>{clinicInfo.name} | {clinicInfo.address} | 電話：{clinicInfo.phone}</p>
          </div>
        </div>
      </div>
    </div>
  );
}